<template>
  <div>
    <el-container>
      <el-header>
        <vhead></vhead>
      </el-header>
      <el-container>
        <el-aside width="220px">
            <el-col>
                <el-menu
                  :default-active="id"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b">

                    <el-submenu index="1">
                      <template slot="title">
                        <i class="el-icon-s-goods"></i>
                        <span>旅游中心</span>
                      </template>
                      <el-menu-item-group>
                        <router-link to="/admin/hotel"><el-menu-item index="1-1">酒店管理</el-menu-item></router-link>
                        <router-link to="/admin/strategy"><el-menu-item index="1-2">攻略管理</el-menu-item></router-link>
                        <router-link to="/admin/scenic"><el-menu-item index="1-3">景点管理</el-menu-item></router-link>
                        <router-link to="/admin/ticket"><el-menu-item index="1-4">车票管理</el-menu-item></router-link>
                      </el-menu-item-group>
                    </el-submenu>


                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-s-order"></i>
                      <span>用户中心</span>
                    </template>
                    <el-menu-item-group>
                      <router-link to="/admin/user"><el-menu-item index="2-1">用户管理</el-menu-item></router-link>
                    </el-menu-item-group>
                  </el-submenu>

                </el-menu>
              </el-col>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vhead from './public/vheader.vue'

export default {
  data () {
    return {
      id:'0',
      index:'0'
    }
  },components:{
    vhead
  },methods:{
    handleOpen:function(){

    },
    handleClose:function(){

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-table .cell {
      text-align:center;
    }
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      height:10vh;
      padding:0px;
    }
  a{
    color:#666;
  }
    .el-aside {
      background-color: #545C64;
      color: #333;
      text-align: center;
      height:90vh;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      /* text-align: center; */
      height:80vh;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    div.button_div{
      text-align:left;
      margin:10px 0;
    }
    .ruleForm{
      margin-top:20px;
      width:70%;
    }
</style>
